<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup >
import type { Image,ConsultInfo } from '@/types/consult';
import { uploadImageApi } from '@/apis/consult';
import {ref,computed} from 'vue'
import { useConsultStore } from '@/stores/consult';
import { onShow } from '@dcloudio/uni-app';
const store = useConsultStore()
//1.收集患者信息
const illnessInfo = ref<ConsultInfo>({
  illnessDesc:'', //病情描述
  illnessTime:1, //患病时间
  consultFlag:0,  //是否就诊
  pictures: [] as Image[]// 图片
})
// 5. 下一步
const nextStep = ()=>{
  store.illnessInfo = illnessInfo.value
  store.type = props.type
  store.illnessType = props.illnessType
  store.depId = props.depId
  
  // 跳转到患者列表页面
  uni.navigateTo({
    url:'/subpkg_archive/list/index?type=consult',
  })
}
const imageList = computed(()=>{
  return illnessInfo.value.pictures.map((item)=>{
    return {
      url: item.url,
      id: item.id
    }
  })
})
onShow(()=>{
  if(store.illnessInfo.illnessDesc !== ''){
    uni.showModal({
      title:'温馨提示',
      content:'是否恢复之前填写的病情信息？',
      confirmText:'确认',
      confirmColor: '#16C2A3',
      cancelColor: '#848484',
      success: ({ confirm })=>{
        if(confirm){
          illnessInfo.value = store.illnessInfo
        }
      },
    })
  }
})
//患病时长
const illnessTimes = [
  { value: 1, text: '一周内' },
  { value: 2, text: '一月内' },
  { value: 3, text: '半年内' },
  { value: 4, text: '半年以上' },
]
 // 是否就诊过
 const consultFlags = [
    { value: 1, text: '就诊过' },
    { value: 0, text: '没有就诊过' },
  ]
  const onFlagTagClick =(value: number)=>{
    illnessInfo.value.consultFlag = value
  }

const changeIllnessTime = (value: number)=>{
  illnessInfo.value.illnessTime = value
}
// 2. 选择图片上传

const onSelect =async (e: any)=>{
  const res = await uploadImageApi(e.tempFilePaths[0])
  illnessInfo.value.pictures.push(res)
  
}
// 3. 删除图片
const onDelete = (e: any)=>{
  illnessInfo.value.pictures.splice(e.index, 1)
}
// 4. 下一步按钮是否可用
const props = defineProps<{
  type: string,
  illnessType: string,
  depId: string
}>()
const nextStepEnable = computed(() => {
  return illnessInfo.value.illnessDesc.trim() == ''
})
</script>


<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image src="/static/uploads/doctor-avatar-2.png" class="doctor-avatar" />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">图片数据回显处理
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput v-model="illnessInfo.illnessDesc" type="textarea" :input-border="false" placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空" />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text v-for="(item, index) in illnessTimes" :key="index" class="tag" :class="{ active: item.value === illnessInfo.illnessTime}" @click="changeIllnessTime(item.value)">{{ item.text }}</text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text class="tag" v-for="(item,index) in consultFlags" :key="index" :class="{active:illnessInfo.consultFlag === item.value}" @click="onFlagTagClick(item.value)">就诊过</text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker v-model="imageList" title="上传病情相关图片 (仅医生可见)" limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }" file-extname="png,jpg,gif,webp" :auto-upload="false"
          @select="onSelect" @delete="onDelete"/>
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="nextStepEnable" @click="nextStep">下一步</button>
    </view>
  </scroll-page>
</template>
<style lang="scss">
  @import './index.scss';
</style>